<template>
    <!--答题考试记录详情信息页面-->
    <view class="answerDetails flex flex-column">
        <Head :headInfo="headInfo" :practiceType="practiceType"></Head>
        <view class="content f_1  flex flex-column">
            <view class="navbar">
                <Navbar :tabList="navList" :selectVal="navbarVal" @updateVal="navbarClick" ref="Navbar" />
            </view>
            <view v-if="navbarVal != 4">
                <view class="list-view" v-if="list.length !== 0">
                <view v-for="(item, index) in list" :key="item.id">
                    <!--判断题-->
                    <BooleanQuestion v-if="item.type === '0101'" :key="item.id" :item="item" :answerNumber="index + 1"
                        disabled :isShowScore="practiceType != 2">
                    </BooleanQuestion>
                    <!--单选题-->
                    <RadioQuestion v-if="item.type === '0201'" :key="item.id" :item="item" :answerNumber="index + 1"
                        disabled :isShowScore="practiceType != 2">
                    </RadioQuestion>
                    <!--多选题-->
                    <MultipleQuestion v-if="item.type === '0301'" :key="item.id" :item="item" :answerNumber="index + 1"
                        disabled :isShowScore="practiceType != 2">
                    </MultipleQuestion>
                    <!--描述题-->
                    <DescribeQuestion v-if="['si02', 'si02', 'si03', 'si04'].includes(item.type)" :key="item.id"
                        :item="item" :answerNumber="index + 1" disabled></DescribeQuestion>
                </view>
            </view>
            <Empty v-else style="margin-top: 30%;"></Empty>
            </view>
            <UserPerformance v-else :dataSource="userPerformanceList"
                :upgPracticeJoinUuid="upgPracticeJoinUuid" :practiceType="practiceType"></UserPerformance>
        </view>
    </view>
</template>

<script>
import RadioQuestion from "@/improve/components/answer/question/RadioQuestion.vue";
import DescribeQuestion from "@/improve/components/answer/question/DescribeQuestion.vue";
import BooleanQuestion from "@/improve/components/answer/question/BooleanQuestion.vue";
import MultipleQuestion from "@/improve/components/answer/question/MultipleQuestion.vue";
import AnswerNav from "@/improve/components/answer/AnswerNav.vue";
import Head from "./Head.vue";
import { getUpgPracticeScoreResultHeader, getUpgPracticeScoreResult } from '@/improve/services'
import Navbar from "@/improve/components/Navbar.vue";
import UserPerformance from "./UserPerformance.vue";
import Empty from "@/improve/components/common/Empty.vue";

export default {
    name: "answerDetails",
    components: {
        AnswerNav, Head, MultipleQuestion, BooleanQuestion, DescribeQuestion, RadioQuestion, Navbar, UserPerformance, Empty
    },
    data() {
        return {
            navList: [
                { text: "全部试题", value: 1 },
                { text: "答对试题", value: 2 },
                { text: "答错试题", value: 3 },
                { text: "排行榜", value: 4 }
            ],
            navbarVal: 1,
            upgPracticeJoinUuid: "",
            practiceType: "1",//练测类型
            list: [],
            scrollTop: 0, //滚动距离
            windowHeight: 0,
            headInfo: null,
            userPerformanceList: [],
            onLineUserHeadInfo: {},
        }
    },
    computed: {
        listShow() {
            return this.isHistory ? this.navbarVal !== 4 : !this.isHistory
        },
        // activeList() {
        //     if (this.navbarVal === 2) {
        //         return this.list.filter(item => item.answer === item.stuAnswer)
        //     } else if (this.navbarVal === 3) {
        //         return this.list.filter(item => !item.stuAnswer || item.answer !== item.stuAnswer)
        //     } else {
        //         return this.list
        //     }
        // },
        answerData() {
            const obj = {
                total: 0, //总数
                isCollect: false, //是否收藏
                collectTotal: 0,//收藏个数
                successTotal: 0, //答对数量
                errorTotal: 0, //打错数量
            }
            if (this.list.length) {
                obj.successTotal = this.list.filter((item) => item?.correct)?.length
                obj.errorTotal = this.list.filter((item) => !item?.correct)?.length
                obj.collectTotal = this.list.filter((item) => !item?.isCollect)?.length
                obj.total = this.list.length
            }
            return obj
        }
    },
    created() {
        this.list.forEach((item) => {
            if (item.selections) {
                try {
                    item.selections = JSON.parse(item.selections)
                } catch (e) {

                }
            }
        })
    },
    methods: {
        navbarClick(val) {
            if (val === this.navbarVal) return
            this.navbarVal = val
            this.userPerformanceList = []
            this.list = []
            this.getUpgPracticeScoreResult()
        },
        // 获取历史练习-导航信息
        async getUpgPracticeScoreResultHeader() {
            const data = await getUpgPracticeScoreResultHeader({ upgPracticeJoinUuid: this.upgPracticeJoinUuid, type: this.practiceType })
            this.headInfo = { ...data }
        },
        // 获取历史练习-答题详情
        async getUpgPracticeScoreResult() {
            const data = await getUpgPracticeScoreResult({ upgPracticeJoinUuid: this.upgPracticeJoinUuid, type: this.practiceType, desc: true, headerType: this.navbarVal })
            if (this.navbarVal === 4) {
                this.userPerformanceList = data?.map(i => ({
                    ...i,
                    scoreInt: i.scoreInt ? i.scoreInt : 0,
                }))
            } else {
                this.list = data.map(i => ({
                    ...i,
                    stuAnswer: i.stuAnswer ? i.stuAnswer : '未答题',
                    score: i.score ? i.score : 0,
                    stuScore: i.stuScore ? i.stuScore : 0,
                    selections: JSON.parse(i.selections),
                }))
            }
        },

    },
    onLoad(options) {
        this.upgPracticeJoinUuid = options.upgPracticeJoinUuid
        this.practiceType = options.practiceType
        this.getUpgPracticeScoreResultHeader()
        this.getUpgPracticeScoreResult()

        uni.getSystemInfo({
            success: (res) => {
                this.windowHeight = res.windowHeight
            }
        })
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    }
}
</script>

<style scoped lang="scss">
.answerDetails {
    height: 100vh;
    width: 100vw;
    background-color: #FFFFFF;


    .line {
        width: 100%;
        background-color: #F5F5F5;
    }


    .content {
        background-color: #FFFFFF;
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
        position: relative;
        margin-top: -25px;
        padding-bottom: calc(env(safe-area-inset-bottom));


        .title {
            font-size: 16px;
            color: #333333;
            font-weight: bold;
            padding: 18px;
            border-bottom: solid 1px #F5F5F5;
        }

        .navbar {
            padding: 15px;
        }

        .is-btn {
            padding-bottom: calc(80px + env(safe-area-inset-bottom));
        }

        .list-view {
            background-color: #FFFFFF;
            padding-top: 1px;
            box-sizing: border-box;
        }
    }

    .btn-item {
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        position: fixed;
        background-color: #FFFFFF;
        box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
        bottom: 0;
        width: calc(100% - 40px);
        z-index: 99;
        padding-left: 20px;
        padding-right: 20px;


        .next,
        .prev {
            border-radius: 12px;
            text-align: center;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
        }

        .next {
            margin-left: 20px;
            background-color: #37B874;
            color: #FFFFFF;

        }

        .prev {
            margin-left: 20px;
            background-color: #FFFFFF;
            color: #37B874;
        }

    }

    .nav-btn {
        position: fixed;
        right: 0;
        bottom: 100px;

        image {
            width: 50px;
            height: 50px;
        }
    }
}
</style>